import React, { Component } from 'react';
// import types from 'prop-types'
class Child extends Component {
  state = {
    all: false,
    lessons: [
      this.props.arr
    ],
    selected: []
  }
  // 全选操作方法
  setAll = evt => {
    console.log(1,...this.state.lessons);
    // 得到当前单个复选框它的是否勾选，如果勾选上则返回true，与之返回false
    let all = evt.target.checked

    // 如果你返回为真，则需要把记录勾选每一项中听数组件中添加对应的所有的记录数据，反之数组为空
    // 赋值一定要注意，数组它是引用类型，所以用深复制完成
    let selected = all ? [...this.state.lessons] : []
    // 更新数据源和更新视图
    this.setState({ all, selected })
  }

  // 单个选择
  // item 它就是它前的选中项的数据
  // evt  事件对象
  setSelected = (item, evt) => {
    // 得到当前复选框是否选中
    let bool = evt.target.checked
    // 单个复选框，勾选后的数据记录数组
    let selected = []
    // 如果你勾选中
    if (bool) {
      // 把当前的数据项添加到数据源中
      selected = [...this.state.selected, item]
    } else {
      // 如果没有勾选，则把当前项去除
      selected = this.state.selected.filter(val => val !== item)
    }
    // 更新数据源和视图
    this.setState(state => ({
      selected
    }), () => {
      // 等数据更新完毕后，获取最新的勾选数据，判断它是否与源数据一样长度，如果一样则表示全选中，则让全选复选框选中
      this.setState({ all: this.state.lessons.length === this.state.selected.length })
    })
  }


  render() {
    console.log(this.props.arr)
    return (
      <div
      style={{
        position:'absolute',
        top:'50px',
        right:'180px'
      }}
      >
        全选<input type="checkbox" checked={this.state.all} onChange={this.setAll} />
        {/* 受控组件,value受到state控制,state中的数据通过onchange来修改 */}

        <table style={{
          borderCollapse: 'separate',
          borderSpacing: ' 100px 10px'
        }}>


          <thead >
            <tr>
              <th>选择</th>
              <th>账号</th>
              <th>密码</th>
              <th>年龄</th>
            </tr>
          </thead>
          <tbody>
            {
              this.props.arr.map((item, index) => (
                <tr key={index}>
                  <th><input type="checkbox"
                  defaultValue={item}
                  // checked 只接受true/false  而使用es6数据新增方法includes它返回就是true/false
                  checked={this.state.selected.includes(item)}
                  onChange={evt => this.setSelected(item, evt)}
                  /></th>
                  <th>{item.username}</th>
                  <th>{item.password}</th>
                  <th>{item.age}</th>
                </tr>
              ))
            }
          </tbody>
        </table>
      </div >
    );
  }



}







export default Child;
